<template>
  <el-button
    @click="
      () => {
        myEchart.dispatchAction({
          type: 'toggleSelect',
          seriesName: 'bar1',
          dataIndex: [0, 1],
        });
      }
    "
    >切换柱状图数据选中</el-button
  >
  <el-button
    @click="
      () => {
        myEchart.dispatchAction({
          type: 'legendToggleSelect',
          name: 'line1',
        });
      }
    "
    >通过legend切换折线图</el-button
  >
  <el-button
    @click="
      () => {
        myEchart.dispatchAction({
          type: 'legendToggleSelect',
          name: 'bar1',
        });
      }
    "
    >通过legend切换柱状图</el-button
  >
  <el-button
    @click="
      () => {
        myEchart.setOption(option);
      }
    "
    >返回</el-button
  >
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
let data = [
  {
    date: "2024-01-01",
    value: 60,
    detail: [
      {
        time: "9:00-12:00",
        value: 25,
      },
      {
        time: "12:00-18:00",
        value: 30,
      },
      {
        time: "16:00-22:00",
        value: 5,
      },
    ],
  },
  {
    date: "2024-01-02",
    value: 80,
    detail: [
      {
        time: "9:00-12:00",
        value: 40,
      },
      {
        time: "12:00-18:00",
        value: 20,
      },
      {
        time: "16:00-22:00",
        value: 20,
      },
    ],
  },
  {
    date: "2024-01-03",
    value: 100,
    detail: [
      {
        time: "9:00-12:00",
        value: 50,
      },
      {
        time: "12:00-18:00",
        value: 20,
      },
      {
        time: "16:00-22:00",
        value: 30,
      },
    ],
  },
];
let lineData = [60, 50, 28];
let option = {
  tooltip: {},
  legend: {
    formatter: (value) => {
      let num = 0;
      if (value === "line1") {
        num = lineData.reduce((pre, now) => pre + now);
      } else {
        num = data.reduce((total, now) => {
          return total + now.value;
        }, 0);
      }
      return value + ":" + num;
    },
  },
  xAxis: {
    type: "category",
    data: data.map((item) => item.date),
  },
  yAxis: {},
  series: [
    {
      type: "line",
      name: "line1",
      data: lineData,
      selectedMode: "multiple",
      select: {
        itemStyle: {
          borderWidth: 10,
          borderColor: "red",
          color: "red",
        },
        symbolSize: 10,
      },
    },
    {
      type: "bar",
      name: "bar1",
      data: data.map((item) => item.value),
      selectedMode: "multiple",
      select: {
        itemStyle: {
          borderWidth: 4,
        },
      },
    },
  ],
};
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich);
  myEchart.setOption(option);
  myEchart.on("click", "series.bar", (value) => {
    let date = value.name;
    let someData = data.find((item) => {
      if (item.date === date) {
        return item.detail;
      }
    });
    let detail = someData.detail;
    myEchart.setOption(
      {
        xAxis: {
          data: detail.map((item) => item.time),
        },
        yAxis: {},
        series: [
          {
            type: "line",
            data: detail.map((item) => item.value),
          },
        ],
      },
      true
    );
  });
  myEchart.on("mouseover", "series.bar", function (series) {
    let singleData = series.data;
    let _lineData = lineData[series.dataIndex];
    myEchart.setOption({
      legend: {
        formatter: (value) => {
          if (value === "bar1") {
            return value + ":" + singleData;
          } else {
            return value + ":" + _lineData;
          }
          
        },
      },
    });
  });
  myEchart.on("mouseout", function () {
    myEchart.setOption({
      legend: {
        formatter: (value) => {
          let num = 0;
          if (value === "line1") {
            num = lineData.reduce((pre, now) => pre + now);
          } else {
            num = data.reduce((total, now) => {
              return total + now.value;
            }, 0);
          }
          return value + ":" + num;
        },
      },
    });
  });
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 400px;
}
</style>
